<template>
	<view class="scenes-container">
		<view class="header">
			<view class="title">场景管理</view>
			<view class="add-btn" @click="handleAddScene">
				<uni-icons type="plus" size="20" color="#007AFF"></uni-icons>
				<text>新建场景</text>
			</view>
		</view>

		<view class="scene-list">
			<view 
				v-for="(scene, index) in scenes" 
				:key="index"
				class="scene-item"
				@click="handleSceneClick(scene)"
			>
				<view class="scene-icon">
					<uni-icons :type="scene.icon" size="32" :color="scene.color"></uni-icons>
				</view>
				<view class="scene-info">
					<view class="scene-name">{{scene.name}}</view>
					<view class="scene-desc">{{scene.description}}</view>
					<view class="scene-devices">
						<text class="device-count">{{scene.deviceCount}}个设备</text>
						<text class="device-status" :class="scene.status">{{scene.statusText}}</text>
					</view>
				</view>
				<view class="scene-actions">
					<view class="action-btn" @click.stop="handleEditScene(scene)">
						<uni-icons type="compose" size="20" color="#666"></uni-icons>
					</view>
					<view class="action-btn" @click.stop="handleDeleteScene(scene)">
						<uni-icons type="trash" size="20" color="#ff4d4f"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<view class="empty-state" v-if="scenes.length === 0">
			<image src="/static/empty-scene.png" mode="aspectFit"></image>
			<text>暂无场景，点击右上角创建</text>
		</view>

		<!-- 新建场景弹窗 -->
		<uni-popup ref="addPopup" type="bottom">
			<view class="popup-content">
				<view class="popup-header">
					<text class="popup-title">新建场景</text>
					<view class="close-btn" @click="closePopup">
						<uni-icons type="close" size="20" color="#999"></uni-icons>
					</view>
				</view>
				<view class="popup-body">
					<view class="form-item">
						<text class="label">场景名称</text>
						<input 
							type="text" 
							v-model="newScene.name" 
							placeholder="请输入场景名称"
							class="input"
						/>
					</view>
					<view class="form-item">
						<text class="label">场景描述</text>
						<textarea 
							v-model="newScene.description" 
							placeholder="请输入场景描述"
							class="textarea"
						/>
					</view>
					<view class="form-item">
						<text class="label">场景图标</text>
						<view class="icon-selector">
							<view 
								v-for="(icon, index) in icons" 
								:key="index"
								:class="['icon-item', newScene.icon === icon.type ? 'active' : '']"
								@click="selectIcon(icon)"
							>
								<uni-icons :type="icon.type" size="24" :color="icon.color"></uni-icons>
							</view>
						</view>
					</view>
				</view>
				<view class="popup-footer">
					<button class="cancel-btn" @click="closePopup">取消</button>
					<button class="confirm-btn" @click="confirmAddScene">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			scenes: [
				{
					id: 1,
					name: '回家模式',
					description: '回家时自动开启空调、灯光等设备',
					icon: 'home',
					color: '#007AFF',
					deviceCount: 3,
					status: 'active',
					statusText: '已启用'
				},
				{
					id: 2,
					name: '睡眠模式',
					description: '睡眠时自动关闭灯光、开启空调',
					icon: 'moon',
					color: '#9254DE',
					deviceCount: 2,
					status: 'inactive',
					statusText: '未启用'
				}
			],
			newScene: {
				name: '',
				description: '',
				icon: 'home',
				color: '#007AFF'
			},
			icons: [
				{ type: 'home', color: '#007AFF' },
				{ type: 'moon', color: '#9254DE' },
				{ type: 'sun', color: '#FFB700' },
				{ type: 'star', color: '#FFB700' },
				{ type: 'heart', color: '#ff4d4f' },
				{ type: 'gear', color: '#07C160' }
			]
		}
	},
	methods: {
		handleAddScene() {
			this.$refs.addPopup.open()
		},
		closePopup() {
			this.$refs.addPopup.close()
			this.newScene = {
				name: '',
				description: '',
				icon: 'home',
				color: '#007AFF'
			}
		},
		selectIcon(icon) {
			this.newScene.icon = icon.type
			this.newScene.color = icon.color
		},
		confirmAddScene() {
			if (!this.newScene.name) {
				uni.showToast({
					title: '请输入场景名称',
					icon: 'none'
				})
				return
			}
			
			const scene = {
				id: this.scenes.length + 1,
				...this.newScene,
				deviceCount: 0,
				status: 'inactive',
				statusText: '未启用'
			}
			
			this.scenes.push(scene)
			this.closePopup()
			
			uni.showToast({
				title: '创建成功',
				icon: 'success'
			})
		},
		handleSceneClick(scene) {
			uni.navigateTo({
				url: '/pages/scenes/detail?id=' + scene.id
			})
		},
		handleEditScene(scene) {
			uni.navigateTo({
				url: '/pages/scenes/edit?id=' + scene.id
			})
		},
		handleDeleteScene(scene) {
			uni.showModal({
				title: '删除确认',
				content: '确定要删除该场景吗？',
				confirmColor: '#ff4d4f',
				success: (res) => {
					if (res.confirm) {
						const index = this.scenes.findIndex(item => item.id === scene.id)
						if (index > -1) {
							this.scenes.splice(index, 1)
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							})
						}
					}
				}
			})
		}
	}
}
</script>

<style lang="scss">
.scenes-container {
	min-height: 100vh;
	background: #f6f7f9;
	padding: 20rpx;
	
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		
		.title {
			font-size: 36rpx;
			font-weight: 600;
			color: #333;
		}
		
		.add-btn {
			display: flex;
			align-items: center;
			background: #007AFF;
			color: #fff;
			padding: 10rpx 30rpx;
			border-radius: 30rpx;
			
			text {
				margin-left: 10rpx;
				font-size: 28rpx;
			}
		}
	}
	
	.scene-list {
		.scene-item {
			display: flex;
			background: #ffffff;
			padding: 30rpx;
			border-radius: 24rpx;
			margin-bottom: 20rpx;
			
			.scene-icon {
				margin-right: 20rpx;
			}
			
			.scene-info {
				flex: 1;
				
				.scene-name {
					font-size: 32rpx;
					font-weight: 600;
					color: #333;
					margin-bottom: 10rpx;
				}
				
				.scene-desc {
					font-size: 24rpx;
					color: #666;
					margin-bottom: 10rpx;
				}
				
				.scene-devices {
					display: flex;
					align-items: center;
					
					.device-count {
						font-size: 24rpx;
						color: #999;
						margin-right: 20rpx;
					}
					
					.device-status {
						font-size: 24rpx;
						padding: 4rpx 16rpx;
						border-radius: 20rpx;
						
						&.active {
							background: rgba(7, 193, 96, 0.1);
							color: #07C160;
						}
						
						&.inactive {
							background: rgba(153, 153, 153, 0.1);
							color: #999;
						}
					}
				}
			}
			
			.scene-actions {
				display: flex;
				align-items: center;
				
				.action-btn {
					padding: 10rpx;
					margin-left: 20rpx;
				}
			}
		}
	}
	
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 100rpx 0;
		
		image {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 20rpx;
		}
		
		text {
			font-size: 28rpx;
			color: #999;
		}
	}
	
	.popup-content {
		background: #ffffff;
		border-radius: 24rpx 24rpx 0 0;
		padding: 30rpx;
		
		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;
			
			.popup-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
			}
		}
		
		.popup-body {
			.form-item {
				margin-bottom: 30rpx;
				
				.label {
					font-size: 28rpx;
					color: #333;
					margin-bottom: 10rpx;
					display: block;
				}
				
				.input {
					width: 100%;
					height: 80rpx;
					background: #f6f7f9;
					border-radius: 12rpx;
					padding: 0 20rpx;
					font-size: 28rpx;
				}
				
				.textarea {
					width: 100%;
					height: 160rpx;
					background: #f6f7f9;
					border-radius: 12rpx;
					padding: 20rpx;
					font-size: 28rpx;
				}
				
				.icon-selector {
					display: flex;
					flex-wrap: wrap;
					margin: 0 -10rpx;
					
					.icon-item {
						width: 80rpx;
						height: 80rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background: #f6f7f9;
						border-radius: 12rpx;
						margin: 10rpx;
						
						&.active {
							background: rgba(0, 122, 255, 0.1);
						}
					}
				}
			}
		}
		
		.popup-footer {
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
			
			button {
				flex: 1;
				height: 80rpx;
				border-radius: 40rpx;
				font-size: 28rpx;
				margin: 0 10rpx;
				
				&.cancel-btn {
					background: #f6f7f9;
					color: #666;
				}
				
				&.confirm-btn {
					background: #007AFF;
					color: #fff;
				}
			}
		}
	}
}
</style>